<template>
  <div class="switch">
    <label>模拟场景：</label>
    <select v-model="scenario" @change="emitChange">
      <option value="auto">自动混合</option>
      <option value="low">低泥沙（<30 NTU）</option>
      <option value="mid">中泥沙（30-80 NTU）</option>
      <option value="high">高泥沙（>80 NTU）</option>
    </select>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const scenario = ref<string>(localStorage.getItem('mockScenario') || 'auto');
watch(scenario, (v) => localStorage.setItem('mockScenario', v));

function emitChange() {
  window.dispatchEvent(new CustomEvent('qingyu:mock-scenario', { detail: scenario.value }));
}
</script>

<style scoped>
.switch { display: inline-flex; align-items: center; gap: 8px; }
select { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; }
</style>



